<!--
 * @Author: chentao 294446993@qq.com
 * @Date: 2023-04-06 09:50:05
 * @LastEditors: chentao 294446993@qq.com
 * @LastEditTime: 2023-04-13 10:30:48
 * @FilePath: \vue3-pc-app\src\components\dialogGroupManagerSetting.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-dialog v-model="dialogVisible" :title="title" :width="width" center custom-class="ui-dialog-body-padding-t-0"
        :close="close">
        <div>我是群管理弹窗</div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onCancel">{{
                        closeBtnText
                }}</el-button>
                <el-button type="primary" @click="onConfirm">
                    {{ okBtnText }}</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { defineComponent, reactive, ref, watch } from 'vue'
export default defineComponent({
    name: 'dialogGroupManagerSetting',
    props: {
        title: {
            type: String,
            default: "提示",
        },
        width: {
            type: String,
            default: "30%",
        },
        cancelShow: {
            type: Boolean,
            default: true,
        },
        confirmShow: {
            type: Boolean,
            default: true,
        },
        closeBtnText: {
            type: String,
            default: "取消",
        },
        okBtnText: {
            type: String,
            default: "确定",
        },
        dialogGroupManagerVisible: {
            type: Boolean,
            default: false
        }
    },
    setup(props, context) {
        const dialogGroupManagerVisible = ref(false)
        const close = () => {
            dialogGroupManagerVisible.value = false
        }
        //确定
        const onConfirm = () => {
            dialogGroupManagerVisible.value = false
        }
        //取消
        const onCancel = () => {
            dialogGroupManagerVisible.value = false
        }
        watch(() => props.dialogGroupManagerVisible, (newVal, oldVal) => {
            dialogGroupManagerVisible.value = newVal;
        },
            {
                immediate: true,
                deep: true
            }
        )
        return {
            dialogVisible: dialogGroupManagerVisible,
            onCancel,
            onConfirm,
            close
        }
    },
})
</script>

<style scoped>

</style>